<template>
	<div class="nation">
		<div class="chart_title">{{chartItem.input_name_cus}}</div>
		<a-spin :spinning="spinning">
			<div :style="{height: chartHeight+'px'}" class="chart_con" id="Nation"></div>
		</a-spin>
	</div>
</template>

<script>
	import {
		defineComponent,
		ref,
		computed,
		createVNode,
		onActivated,
		reactive,
		toRefs,
		nextTick
	} from "vue";
	import request from "../../../../common/utils/request";
	import {
		ExclamationCircleOutlined,
		PlusOutlined,
		DownOutlined,
	} from "@ant-design/icons-vue";
	import {
		Chart,
		getEngine
	} from "@antv/g2";
	import store from "../../../../store";
	export default defineComponent({
		props: {
			chartItem: {
				type: Object,
				default: () => {
					return {}
				}
			},
			chartHeight: {
				type: Number,
				default: 310
			}
		},
		setup(props, context) {
			const state = reactive({
				chart: null,
				chartData: [],
				spinning: false
			})

			const getChartData = () => {
				state.spinning = true
				request.get('/village', '/org/personal/nation', {
					village_id: store.getters.buildingInfo.permissionBuildings[0].id
				}).then(res => {
					let arr = res.result.map(item => item.value)
					let sum = arr.reduce(function(prev, cur) {
						return prev + cur;
					}, 0)
					state.chartData = []
					res.result.map(item=>{
						if(item.value*1 != 0){
							state.chartData.push({
								item: item.title,
								count: item.value*1,
								percent:sum*1!=0? item.value*1/sum: 0,
							})
						}
					})
					nextTick(() => {
						state.spinning = false
						renderChart(sum)
					})
				})
			}

			const renderChart = (sum) => {
				state.chart = new Chart({
					container: 'Nation',
					autoFit: true,
				});
				state.chart.data(state.chartData);
				state.chart.scale('count*percent', {
					formatter: (count, percent) => {
						val = parseInt(percent.toFixed(2) * 100) + '%';
						return '('+count+')'+val;
					},
				});
				state.chart.coordinate('theta', {
					radius: 0.70,
					innerRadius: 0.6,
				});
				state.chart.tooltip({
					showTitle: false,
					showMarkers: false,
					itemTpl: '<li class="g2-tooltip-list-item"><span style="background-color:{color};" class="g2-tooltip-marker"></span>{name}: {value}</li>',
				});
				// 辅助文本
				state.chart
					.annotation()
					.text({
						position: ['50%', '50%'],
						style: {
							fontSize: 14,
							fill: '#8c8c8c',
							textAlign: 'center',
						},
						offsetY: -20,
					})
					.text({
						position: ['50%', '50%'],
						style: {
							fontSize: 20,
							fill: '#8c8c8c',
							textAlign: 'center',
						},
						offsetX: -10,
						offsetY: 20,
					})
					.text({
						position: ['50%', '50%'],
						style: {
							fontSize: 14,
							fill: '#8c8c8c',
							textAlign: 'center',
						},
						offsetY: 20,
						offsetX: 20,
					});
				state.chart
					.interval()
					.adjust('stack')
					.position('percent')
					.color('item')
					.label('percent', (percent) => {
						return {
							style: {
								textBaseline: 'top'
							},
							content: (data) => {
								return `${data.item}: ${parseInt(percent.toFixed(2) * 100)}%`;
							},
						};
					})
					.tooltip('item*percent*count', (item, percent, count) => {
						percent = parseInt(percent.toFixed(2) * 100) + '%';
						return {
							name: item,
							value: '（'+count+'）'+percent,
						};
					});
				
				state.chart.interaction('element-single-selected');
				state.chart.legend({
					position: 'bottom',
					itemHeight: 30
				});
				state.chart.render();
			}
			getChartData()

			return {
				...toRefs(state)
			}
		}
	})
</script>

<style lang="less" scoped>
	.nation {
		width: 100%;
		height: 100%;
		padding: 10px;
		background: #fff;

		.chart_title {
			padding: 5px 15px;
			width: 100%;
			border-bottom: 1px solid #eee;
			font-size: 20px;
		}

		.chart_con {
			width: 100%;
			height: 310px;
			padding: 10px 15px;
		}
	}
</style>